<template>
  <div class="carousel">
    <!-- 轮播 -->
    <!-- :list="curClass.children||[]" -->
    <!--  img-width="288px" img-height="410px" -->
    <Slider class="carousel-box" :key="sliderKey" :list="arrAllList"
      :privIcon="{ type: 'img', path: '/images/slider/icon-left.png' }"
      :nextIcon="{ type: 'img', path: '/images/slider/icon-right.png' }" :autoplay="false" :showNavigation="false"
      slider-height="auto" img-width="18rem" img-height="25.625rem"></Slider>
    <div class="system-class">
      <ul class="system-class-list">
        <li v-for="(item, index) in arrSysClass" :key="index" :title="item.meta && item.meta.title ? item.meta.title : ''"
          @click="onClick(item)">
          <img v-if="item.path" :src="proxy.getImageUrl('/images/' + item.path + '.png')">
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
// 引入轮播组件
import Slider from "@/components/Slider";
// 引入store
import userUserStore from '@/store/modules/user';
import usePermissionStore from '@/store/modules/permission';
import { ref } from "vue";
// 获取pinia
const userStore = userUserStore();
const permissionStore = usePermissionStore();
// 菜单列表
const arrMenus = computed(() => permissionStore.menus || '');
// 当前用户登录名
const userCode = computed(() => userStore.userCode || '');//'zhuanjia1'
// 是否显示系统
let showSjcj = computed(() => userStore.showSjcj || false);
let showFwjg = computed(() => userStore.showFwjg || false);
// 渲染Slider
let sliderKey = ref(0);

// 当前实例
const { proxy } = getCurrentInstance();
// 系统分类
const arrSysClass = ref([
  /*
  {
    meta: { title: "风险探查" },
    path: 'fxtc',
    children: [
      { meta: { title: '房屋设施数据采集' }, path: '/' },
      { meta: { title: ' 房屋设施数据质检' }, path: '/' },
    ]
  },
  {
    meta: { title: "风险区划" },
    path: 'fxqh',
    children: [
      { meta: { title: '地震活动断层探察管理' }, path: '/' },
      { meta: { title: ' 地震区划与抗震设防管理' }, path: '/' },
      { meta: { title: ' 地震灾害风险评估与区划' }, path: '/' },
    ]
  },
  {
    meta: { title: "风险评估" },
    path: 'fxpg',
    children: [
      { meta: { title: '承灾体地震易损性分析' }, path: '/' },
      { meta: { title: ' 地震灾害损失预评估' }, path: '/' },
      { meta: { title: ' 地震现场灾害损失调查与评估' }, path: '/' },
      { meta: { title: ' 地震地质灾害评估' }, path: '/' },
      { meta: { title: ' 地震安全保障服务' }, path: '/' },
      { meta: { title: ' 地震灾害风险产品信息服务' }, path: '/' },
      { meta: { title: ' 房屋加固改造信息服务' }, path: '/' },
    ]
  },*/
]);

// 当前分类
let curClass = ref({});
// 所有业务系统菜单
let arrAllList = ref([]);
// 监听菜单
watch(arrMenus, () => {
  if (arrMenus.value && arrMenus.value.length) {
    // 设置轮播图数据
    setSliderData(1);
  }
}, {
  immediate: true, //在侦听器创建时立即触发回调
  deep: true
})
// 监听当前分类
// watch(curClass, (item) => {
//   console.log(item);
// })
// 分类选择
function onClick(item) {
  curClass.value = item;
  // 设置轮播图数据
  setSliderData();
}
// 设置轮播图数据
function setSliderData(isInit) {
  // 重新渲染轮播图
  sliderKey.value = Math.round(Math.random() * 1000);
  let arr = [];
  // 深拷贝
  const menusList = JSON.parse(JSON.stringify(arrMenus.value));
  menusList.map((item) => {
    // 业务系统
    if (item.name == '/mhywxt') {
      if (item.children && item.children.length) {
        if(isInit) {
          curClass.value = item.children[0];
        }
        // 系统分类
        arrSysClass.value = item.children.filter(sysItem => sysItem.children && sysItem.children.length);
        // 拼接所有业务系统菜单
        item.children.map(sysItem => {
          if (sysItem.children && sysItem.children.length) {
            sysItem.children = sysItem.children.filter(subItem => {
              // 分类名称
              subItem.className = sysItem.name;
              // 数据采集
              if (subItem.name == 'fwsssjcj') {
                subItem.component = subItem.component + '?userCode=' + userCode.value;
                return showSjcj.value;
              }
              // 房屋加固、数据质检
              else if (subItem.name == 'fwjggzxxfw' || subItem.name == 'fwsssjzj') {
                subItem.component = subItem.component + '?userCode=' + userCode.value;
                return showFwjg.value;
              }
              else {
                return true;
              }
            });
            arr = arr.concat(sysItem.children);
          }
        });
      } else {
        arrSysClass.value = [];
      }
    }
  })
  // 排序,当前选择分类排最前面
  if(curClass.value && JSON.stringify(curClass.value) != '{}'){
    arr.sort((a, b) => {
      return a.className == curClass.value.name ? -1 : 1;
    });
  }
  arrAllList.value = arr;
}
</script>

<style lang='scss' scoped>
/* 轮播区域 */
.carousel-box {
  position: absolute;
  // bottom: 270px;
  bottom: 16.875rem;
  width: 100%;
  overflow: hidden;
}

/* 系统分类 */
.system-class {
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  width: 100%;

  ul.system-class-list {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      cursor: pointer;
      margin: 5px 3px;

      img {
        // height: 220px;
        height: 13.75rem;
      }
    }
  }
}

@media screen and (max-device-width: 768px) {

  /* 轮播区域 */
  .carousel-box {
    overflow: hidden;
  }

  /* 系统分类 */
  .system-class {
    overflow: hidden;
    bottom: 5rem;

    ul.system-class-list {

      li {
        margin: 5px -5px;

        >img {
          height: 100px;
        }
      }
    }
  }
}
</style>